<template>
  <div class="users_content">
    <div class="card-container">
      <div class="header">
        <el-form
          :inline="true"
          :model="asset"
          class="demo-form-inline"
          size="mini"
        >
          <div class="row">
            <div class="col">
              <el-form-item label="使用人">
                <el-input
                  v-model="asset.employeeId"
                  placeholder="使用人"
                ></el-input>
              </el-form-item>
            </div>
            <div class="col">
              <el-form-item label="资产编号">
                <el-input
                  v-model="asset.assetNo"
                  placeholder="资产编号"
                ></el-input>
              </el-form-item>
            </div>
            <div class="col">
              <el-form-item label="资产序列号">
                <el-input
                  v-model="asset.assetSerialNumber"
                  placeholder="资产序列号"
                ></el-input>
              </el-form-item>
            </div>
            <div class="col">
              <el-form-item label="资产名称">
                <el-input
                  v-model="asset.assetName"
                  placeholder="资产名称"
                ></el-input>
              </el-form-item>
            </div>
            <div style="width:250px">
              <el-form-item>
                <el-button
                  class="header-btn"
                  type="primary"
                  @click="onCreate"
                ><img
                    src="../../../assets/img/globalTable/icon3-add.png"
                    alt=""
                  />新增</el-button>
                <el-button
                  class="header-btn"
                  type="primary"
                  @click="onSubmit"
                ><img
                    src="../../../assets/img/globalTable/icon1-search.png"
                    alt=""
                  />查询</el-button>
                <el-button
                  class="header-btn"
                  type="primary"
                  @click="onReset"
                ><img
                    src="../../../assets/img/globalTable/icon2-reset.png"
                    alt=""
                  />重置</el-button>
              </el-form-item>

            </div>
          </div>
          <div class="row">
            <div class="col">
              <el-form-item label="登记时间">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="asset.createTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </div>
            <div class="col">
              <el-form-item label="是否启用">
                <el-select
                  v-model="asset.enabled"
                  placeholder="是否启用"
                >
                  <el-option
                    label="启用"
                    value="1"
                  ></el-option>
                  <el-option
                    label="未启用"
                    value="0"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="col"></div>
            <div class="col"></div>
            <div style="width:250px"></div>
          </div>

        </el-form>
      </div>

      <el-card>
        <el-table
          :data="assets"
          stripe
          style="width: 100%"
          :height="tableHight"
        >
          <el-table-column
            prop="employeeName"
            label="使用人"
          >
          </el-table-column>
          <el-table-column
            prop="assetNo"
            label="资产编号"
          >
          </el-table-column>
          <el-table-column
            prop="assetSerialNumber"
            label="资产序列号"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
          >
          </el-table-column>
          <el-table-column
            prop="createBy"
            label="创建人"
          >
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="更新时间"
          >
          </el-table-column>
          <el-table-column
            prop="updateBy"
            label="更新人"
          >
          </el-table-column>
          <el-table-column
            prop="enabled"
            label="是否启用"
          >
          </el-table-column>
        </el-table>
      </el-card>
      <add-asset-dialog ref="AddAssetDialogRef"> </add-asset-dialog>
    </div>
  </div>
</template>

<script>
import AddAssetDialog from "@/views/app/employee-asset/dialog/AddAsset.vue";
export default {
  components: {
    AddAssetDialog,
  },
  data () {
    return {
      asset: {
        employeeId: "",
        assetNo: "",
        assetSerialNumber: "",
        assetName: "",
        createTime: new Date(),
        enabled: "1",
      },
      assets: [],
    };
  },
  computed: {
    tableHeight () {
      return this.$store.state.tableHeight - 440;
    }
  },
  methods: {
    onCreate () {
      this.$refs.AddAssetDialogRef.openDialog();
    },
    onDelete () { },
    onUpdate () { },
    onSubmit () {
      console.log("submit!");
    },
    onReset () {
      this.asset = {
        employeeId: "",
        assetNo: "",
        assetSerialNumber: "",
        assetName: "",
        createTime: "",
        enabled: "",
      };
    },
  },
};
</script>

<style>
.header-btn img {
  width: 10px;
  margin-right: 2px;
}
</style>